{% extends webapp_config['LAYOUT'] %}

{% block meta %}
{{ super() }}
<meta name="robots" content="noindex" />
{% endblock %}

{% block meta_title %}Search results{% if query %} for "{{query}}"{% endif %}{% endblock %}

{% block content %}
{% include "docs/_search-bar.html" %}

<div class="row">
  <div class="p-strip is-shallow u-no-padding--bottom">
    <div class="u-fixed-width">
      {% if results and results.entries %}
        <h1 class="p-heading--two u-no-margin--bottom">We've found these results for your search <strong>"{{ query }}"</strong></h1>
      {% else %}
        <h1 class="p-heading--two u-no-margin--bottom">We haven't found any results for your search <strong>"{{ query }}"</strong>.</h1>
      {% endif %}
    </div>
  </div>

  {% if  results and results.entries %}
  {% for item in results.entries %}
  <div class="p-strip is-bordered is-shallow">
    <div class="u-fixed-width">
      <h5><a href="{{ item.link }}" class="title-main">{{ item.htmlTitle | safe}}</a></h5>
      <p>
        {{ item.htmlSnippet | safe }}
      </p>
      <small><a href="{{ item.link }}">{{ item.htmlFormattedUrl | safe }}</a></small>
    </div>
  </div>
  {% endfor %}
  <div class="p-strip p-pagination">
    {% if  results.queries and results.queries.previousPage %}
    <a
      class="p-pagination__link--previous"
      href="/docs/search?q={{ query }}&amp;start={{ results.queries.previousPage.0.startIndex }}{% if siteSearch %}&amp;siteSearch={{ siteSearch }}{% endif %}"
      >
      <span class="p-pagination__label">Previous</span>
    </a>
    {% endif %}
    {% if results.queries and results.queries.nextPage %}
    <a
      class="p-pagination__link--next"
      href="/docs/search?q={{ query }}&amp;start={{ results.queries.nextPage.0.startIndex }}{% if siteSearch %}&amp;siteSearch={{ siteSearch }}{% endif %}"
      >
      <span class="p-pagination__label">Next</span>
    </a>
    {% endif %}
  </div>
  {% else %}
  <div class="p-strip">
    <div class="row">
      <div class="col-6">
        <h3>Why not try widening your search?</h3>
        <p>You can do this by:</p>
        <ul class="p-list">
          <li class="p-list__item is-ticked">Adding alternative words or phrases</li>
          <li class="p-list__item is-ticked">Using individual words instead of phrases</li>
          <li class="p-list__item is-ticked">Trying a different spelling</li>
        </ul>
      </div>
      <div class="col-6">
        <h3>Still no luck?</h3>
        <ul class="p-list">
          <li class="p-list__item is-ticked"><a href="/docs">Visit snapcraft.io/docs</a></li>
          <li class="p-list__item is-ticked"><a href="https://forum.snapcraft.io">Ask on the forum</a></li>
        </ul>
      </div>
    </div>
  </div>
  {% endif %}
  </div>
{% endblock %}
